<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Tests for jQuery Validate Fields</title>
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.validatefields.js"></script>
        <script type="text/javascript">
$(document).ready(function() {
    $("#form").validate();
    //$(document).addValidate();
    //$(document).addLiveValidate();
    //$(document).removeValidate();
});
        </script>
        <style type="text/css">

body { font-size: 80%; }
dt { font-weight: bold }
dd { margin: 0 0 5px 0; }
input, textarea, select { border: 1px solid #000; }

.valko { border: 1px solid #f00; }
.valok { border: 1px solid #0c0; }
.valerror { color: #f00; }

        </style>
    </head>
    <body>
        <form id="form">
            <dl>
                <dt>First Name</dt>
                <dd>
                    <input id="firstname" type="text" validate="notempty() min(2) max(16)" />
                    <span class="valerror" rel="firstname"></span>
                </dd>
                <dt>Last Name</dt>
                <dd>
                    <input id="lastname" type="text" validate="notempty() max(10)" />
                    <span class="valerror" rel="lastname"></span>
                </dd>
                <dt>Email</dt>
                <dd>
                    <input id="email" type="text" validate="email() max(255) regex()" />
                    <span class="valerror" rel="email"></span>
                </dd>
                <dt>Age</dt>
                <dd>
                    <input id="age" type="text" validate="number() minnum(13) maxnum(100)" />
                    <span class="valerror" rel="age"></span>
                </dd>
                <dt>Occupation</dt>
                <dd>
                    <select id="occupation" validate="not('none')">
                        <option value="none">---</option>
                        <option value="0">Automotive</option>
                        <option value="1">Computer programmer</option>
                        <option value="2">Mechanician</option>
                    </select>
                    <span class="valerror" rel="occupation"></span>
                </dd>
                <dt>Terms and conditions</dt>
                <dd><textarea>Blah.</textarea></dd>
                <dd>
                    <input id="terms" type="checkbox" validate="checked()" specificmsg="You have to accept terms and conditions" />
                    <label for="terms">I have read and I accept terms and conditions</label>
                    <br />
                    <span class="valerror" rel="terms"></span>
                </dd>
            </dl>
            <button type="submit">Send</button>
        </form>
    </body>
</html>
